<template>
    <view class="flex h-full">
        <left-aside></left-aside>

        <view class="mt-[20rpx] w-full">
            <z-paging
                ref="paging"
                v-model="goodsList"
                @query="getData"
                :fixed="false"
                height="100%"
                :auto-clean-list-when-reload="false"
                :auto-scroll-to-top-when-reload="false"
            >
                <view class="mx-[20rpx]">
                    <l-swiper
                        class="mb-[20rpx]"
                        height="200"
                        v-if="page.enabled"
                        :content="page"
                        mode="none"
                    />
                    <view>
                        <!-- <sort-nav v-model:active="sort" @change="changeNav"></sort-nav> -->

                        <view class="mt-[20rpx]" v-for="item in goodsList" :key="item.id">
                            <router-navigate
                                :to="`/pages/goods_detail/goods_detail?id=${item.id}`"
                                open-type="navigate"
                                hover-class="none"
                            >
                                <goods-card
                                    shape="rectangle"
                                    :name="item.name"
                                    :image="item.image"									
                                >
                                    <view class="mt-2">
										<view class="text-muted mb-[10rpx]">
											<view class="sales-num font20">已售{{ item.salesNum }}</view>										    
										</view>
										<!-- ml-[10rpx -->
										<span class="text-muted font24 mb-[10rpx]" v-if="item.lineationPrice > 0">
											原价<text class="line-through">¥{{item?.lineationPrice}}	</text>									
										</span>
										
                                       <view class="item-row-between">
										   <view class="item-row">
											   <price
												   :content="item?.price"
												   main-size="28rpx"
												   minor-size="20rpx"
												   fontWeight="500"
											   />	
												
										   </view>									   
										   <span :style="{ background: color }" class="item-row-center jiaz-buy font24" @click="goDetail(item)">购买</span>
									   	</view>
                                    </view>
                                </goods-card>
                            </router-navigate>
                        </view>
                    </view>
                </view>
            </z-paging>
        </view>
    </view>
</template>

<script lang="ts" setup>
import { ref, watch, shallowRef } from 'vue';
import leftAside from './left-aside.vue';
import { getGoodsLists } from "@/api/goods"

import { useDataEffect } from "./useDataEffect";
const { list, page, current } = useDataEffect()

const paging = shallowRef()
const goodsList = ref<any>([])
const sort = ref<string>('');

const changeNav = () => {
    paging.value.reload()
}

// 购买
const goDetail = (item: any) => {
	uni.navigateTo({
		url: '/pages/goods_detail/goods_detail?id='+item.id
	})
}

const props = withDefaults(
    defineProps<{
        content: string | number // 标题
        prec?: number // 小数数量
        autoPrec?: boolean // 动态小数
        color?: string // 颜色
        mainSize?: string // 主要内容字体大小
        minorSize?: string // 次要内容字体大小
        lineThrough?: boolean // 贯穿线
        fontWeight?: string // 字重
        prefix?: string // 前缀
        suffix?: string // 后缀
    }>(),
    {
        content: '',
        prec: 2,
        autoPrec: true,
        // color: '#FF2C3C',
        color: 'var(--theme-color)',
        mainSize: '36rpx',
        minorSize: '28rpx',
        lineThrough: false,
        fontWeight: 'normal',
        prefix: '￥',
        suffix: ''
    }
)

const getData = async (pageNo: number, pageSize: number) => {
    try {
        const { lists } = await getGoodsLists({
            pageNo: pageNo,
            sort: sort.value,
            pageSize: pageSize,
            categoryId: list.value[current.value].id
        })
        paging.value.complete(lists)
    } catch (error) {
        console.log(error)
        paging.value.complete(false)
    }
}

watch(
    () => current,
    (val) => {
        sort.value = '';
        paging.value.reload()
        console.log(val.value)
    },
    {
        deep: true
    }
)
</script>
